<template>
<!--  <div :domain="objectOfAttrs">{{ objectOfAttrs.id }}</div>-->

<!--  <el-button @click="set">设置</el-button>
  <el-button @click="get">读取</el-button>
  <el-button @click="remove">删除</el-button>
  width: 1519px; height: 800px;
  -->

  <div class="wrapper">
    <div class="container" style="background-image: url('public/indexImg.png');">
    </div>
    <div class="background">
      <div class="flex justify-center">
        <p style="font-size: 3.6vw; color: #029aff">基于区块链技术构建茶叶溯源平台</p>
      </div>
      <div class="flex justify-end">
        <el-button type="info" primary @click="backHome">
          <el-icon>
            <SwitchButton/>
          </el-icon>
          退出系统
        </el-button>
      </div>

      <div class="carousel-wrapper">
        <el-carousel :pause-on-hover="false" indicator-position="none" v-model="activeIndex" >
          <el-carousel-item class="flex justify-center" >
            <el-image style="width: 25%; height: 100%" src="http://ahtea.wtycms.cn/static/static/picture/agricultural_data.png"></el-image>
          </el-carousel-item>
          <el-carousel-item >
            <el-image style="width: 25%; height: 100%" src="http://ahtea.wtycms.cn/static/static/picture/nyscpc.png"></el-image>
          </el-carousel-item>
          <el-carousel-item >
            <el-image style="width: 25%; height: 100%" src="http://ahtea.wtycms.cn/static/static/picture/agricultural_data.png"></el-image>
          </el-carousel-item>
          <el-carousel-item >
            <el-image style="width: 25%; height: 100%" src="http://ahtea.wtycms.cn/static/static/picture/business.png"></el-image>
          </el-carousel-item>
          <el-carousel-item >
            <el-image style="width: 25%; height: 100%" src="http://ahtea.wtycms.cn/static/static/picture/agricultural_data.png"></el-image>
          </el-carousel-item>
          <el-carousel-item >
            <el-image style="width: 25%; height: 100%" src="http://ahtea.wtycms.cn/static/static/picture/nyscpc.png"></el-image>
          </el-carousel-item>
        </el-carousel>
        <el-button @click="baseInfoManage" @mouseover="activeIndex = 0">基础信息管理</el-button>
        <el-button @click="plantingProcessManagement" @mouseover="activeIndex = 1">种植过程管理</el-button>
        <el-button @click="processManagement" @mouseover="activeIndex = 4">加工过程管理</el-button>
        <el-button @click="router.push('/khxx')" @mouseover="activeIndex = 3">流通过程管理</el-button>
        <el-button @click="router.push('/symInfo')" @mouseover="activeIndex = 2">防伪溯源信息</el-button>
        <el-button @click="router.push('/czshow')" @mouseover="activeIndex = 5">存证系统</el-button>
        <el-button @click="router.push('/sym')" @mouseover="activeIndex = 1">详情</el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive }  from "vue";
import { useCookies } from '@vueuse/integrations/useCookies'
import {useRouter} from "vue-router";
import Slide from "../../components/table/Slide.vue";
import {SwitchButton} from "@element-plus/icons-vue";

const router = useRouter()

const activeIndex = ref(0)
const backHome = ()=> {
  router.push('/')
}
const baseInfoManage = ()=> {
  router.push("/enterpriseinfo")
}
const plantingProcessManagement = ()=> {
  router.push("/trpcgInfo")
}
const processManagement = () => {
  router.push("/jggc")
}
</script>

<style scoped>
.container {
  display: flex; /* 设置为Flex容器 */
  justify-content: center; /* 设置在主轴上居中对齐 */
  align-items: center; /* 设置在交叉轴上居中对齐 */
  width: 100%;
  /*容器的高度与浏览器窗口的高度相同*/
  height: 100vh;
  background-size: cover;
  background-position: center;
}
.wrapper {
  position: relative;
}

.background {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.background::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 0;
}

.carousel-wrapper {
  padding-top: 120px;
  position: relative;
  z-index: 1;
}
</style>

<!--const objectOfAttrs = ref({
id: 'container',
class: 'wrapper'
})

const cookies = useCookies()
console.log(cookies)
let set = ()=> {
// cookies.set("admin-token", "123")
objectOfAttrs.value.id = 111
}

let get = ()=> {
console.log(cookies.get("admin-token"));
}

let remove = ()=> {
cookies.remove("admin-token")
}-->
